<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
	<meta http-equiv="Content-Language" content="en-us" /> 

	<style type="text/css">
	body { line-height: 1.5em; font-family: sans-serif; color: #444; padding-bottom: 450px;}
	h3 { color: #000; }
	li { list-style: none; margin: .2em; zoom: 1; }
	label { width: 8em; float: left; text-align: right; padding-right: .5em; }
    label small { display: block; margin-top: -8px; font-size: 10px; }
	.captcha { border: 1px black solid; background-color: #faa; float: left; text-align: center; padding: 5px; margin: 5px; }
	.terms { clear: both; }
	.terms label { width: auto; float: none; }
    .vidoop_secure { float: left; }
	.navigation { padding: 0px; }
	.navigation li { display: inline; margin: 0px; padding: 5px; }
	#captcha { display: block;}
    .vs_arrow { background-image: url(arrow.gif); }
    .vidoop_secure.vs_error input { background-image: url(error.gif); }
    .vidoop_secure.vs_error .vs_hint { background-image: url(error.gif); }
	</style>

</head>

<body>

<ul class="navigation">
	<li><a href="inline-demo.html">Try inline captcha</a></li>
    <li>Try flyout captcha</li>
</ul>

<form id="signup-form" method="POST" action="">
		<h3>Start using <strong>This Awesome Service</strong> for free &raquo;</h3>

		<ul>
			

			<li>
				<label for="id_username">Username</label>
				<input tabindex="1" id="id_username" type="text" class="required" name="username" maxlength="30" />
				
			</li>
			

			<li>
				<label for="id_email">Email address</label>
				<input tabindex="2" id="id_email" type="text" class="required" name="email" maxlength="75" />
			</li>
			

			
			<li>
				<label for="id_password1">Password</label>
				<input tabindex="3" type="password" name="password1" id="id_password1" />
			</li>
			

			<li>
				<label for="id_password2">Password, again</label>

				<input tabindex="4" type="password" name="password2" id="id_password2" />
			</li>
			
			<li>
					

				<label for="captcha">Verification code<small>(required)</small></label>
				<div class="vidoop_secure">
					<script type="text/javascript">
				    var vidoop_secure = {
						instructions: "Type in the 3 letters you see on the pictures of <span class='category_name'>wild animals</span>, <span class='category_name'>castles</span>, and <span class='category_name'>clocks</span>, in that order." 
					};
					</script>
				    <noscript>
					<div class="captcha">
						<img src="image.jpg" />
						<div class="instructions">
							<p>Type in the 3 letters you see on pictures of
								<strong>wild animals</strong>, <strong>castles</strong>, and <strong>clocks</strong>, in that order.
							</p>
						</div>
					</div>
				    </noscript>
                    <input tabindex="5" id="captcha" name="captcha" type="text" />
				    <input type="hidden" name="captcha_id" value="whatever" />
				</div>
			</li>

			
			<li class="terms">
				<input tabindex="6" id="id_tos" type="checkbox" class="required" name="tos" />
				<label for="id_tos">I am 13 years or older and have read and agree to the <a href="#" target="_blank">Terms of Service</a></label>
			</li>

			<li class="submit" tabindex="7"><input type="submit" value="Sign Up"/></li>
		</ul>

	</form>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="captcha.js"></script>
<script type="text/javascript">
$(function() {

	$(".vidoop_secure .vs_bubble img").attr('src', 'image.jpg');

	$(document.forms).submit(function(e) {
		$("input:submit").val("This isn't a real site");
		e.preventDefault();
	});
});
</script>

</body>

</html>
